<template>
  <basicContainer>
    <el-button icon="el-icon-close"
               @click="closeWindow"
               type="text"
               style="z-index: 100;position: absolute;top: 60px;right: 40px;font-size: 24px;color: #999">
    </el-button>
    <div>
      <p class="businessTitle">商务中心配置</p>
    </div>
    <avue-crud :data="data" :option="option"  @selection-change="selectionChange"  :table-loading="loading"  :page.sync="page" @on-load="onLoad(page)">
      <template slot="menuLeft" slot-scope="{size}">
        <p class="redTip">*当前仅支持tiktok</p>
      </template>
      <template slot="menuRight" slot-scope="{size}">
        <el-button type="primary" icon="el-icon-refresh"  size="mini" @click="refreshListClick">获取BC列表</el-button>
      </template>
      <template slot="status" slot-scope="{ row }">
        <el-switch
          v-model="row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value=1
          :inactive-value=0
          @change="handleSwitch(row)"
         >
        </el-switch>
      </template>

    </avue-crud>
  </basicContainer>
</template>

<script>
import {getList,getBCList,submitBcId} from "@/api/system/businessConfig";
import {accountUpdateInformation} from "@/api/business/account";
import {getOptimizer} from "@/api/offer/creative";
import {getDetail as getOfferDetail} from "@/api/business/offer";
export default {
  name: "businessCenterConfiguration",
  data() {
    return {
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      loading:false,
      option:{
        border:true,
        addBtn:false,
        menu:false,
        refreshBtn: false,
        columnBtn: false,
        selection: true,
        tip:false,
        column:[
          {
            label:'序号',
            prop:'autoIncId'
          }, {
            label:'商务中心名称',
            prop:'bcName'
          }, {
            label:'bc_id',
            prop:'bcId'
          }, {
            label:'显隐',
            prop:'status',
            slot:true
          }
        ]
      },
    };
  },
  methods:{
    selectionChange(list){
      console.log(list)
    },
    closeWindow() {
      this.$emit("close");
    },
    async refreshListClick(){
      const {data: res} = await getBCList();
      console.log(res.data.code)
        if(res.code == 200){
          this.onLoad(this.page)
          this.$message({
            message: 'BC列表已更新',
            type: 'success'
          })
        }else {
          this.$message({
            message: '获取BC列表失败',
            type: 'error'
          })
        }
    },
    async handleSwitch(row){
      let data={
        id:row.id,
        status:row.status
      }
      const {data: res} = await submitBcId(data);
      if(res.code==200){
        this.onLoad(this.page)
      }
    },
    onLoad(page, params = {}){
      this.loading=true
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign({}, params, this.query)
      ).then((res) => {
        this.data=res.data.data.records
        this.page.pageSize=res.data.data.size
        this.page.total=res.data.data.total
        this.page.currentPage=res.data.data.pages
        this.loading = false;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.redTip{
  color: red;
  font-size: 14px;
}
.businessTitle{
  font-size: 16px;
  font-weight: bold;
}
</style>
